<template>
  <div class="container">
    <el-card shadow="never">
      <div class="head flex flex-ai-c">
        <div class="fs-16 bold flex flex-ai-c">
          <span>{{ detail.userName }}</span>
          <img v-if="detail.sex === 0" src="@/assets/icon-male.png" alt="" class="icon-gender">
          <img v-if="detail.sex === 1" src="@/assets/icon-female.png" alt="" class="icon-gender">
        </div>
      </div>
      <div class="body mg-t-20 flex gap-16">
        <div class="flex-1 flex bg-blue">
          <div class="flex-item flex-1 flex flex-column flex-jc-sb" v-for="(i, index) in listData" :key="index">
            <div class="name fc-lightgray">{{ i.name }}：</div>
            <div class="value fs-22 bold mg-t-10"><span class="fs-14">¥</span>{{ i.value }}</div>
          </div>
        </div>
        <div class="bg-blue flex flex-column flex-jc-c">
          <div>
            <span class="fc-lightgray">电话号码：</span>
            <span class="fc-black">{{ detail.phone }}</span>
          </div>
          <div class="mg-t-10">
            <span class="fc-lightgray">身份证号：</span>
            <span class="fc-black">{{ detail.idCardNo }}</span>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { queryUserEmployeePrepaidRecordSum } from '@/api/advance.ts';

export default defineComponent({
  components: {},
  props: {
    cardId: {
      type: [String, Number],
      default: ''
    },
  },
  data() {
    return {
      detail: {} as any,
      listData: {
        allAmount: {
          name: '预支金额',
          value: 0
        },
        alrAmount: {
          name: '已领金额',
          value: 0
        },
        aitAmount: {
          name: '待领金额',
          value: 0
        },
        stopAmount: {
          name: '停发金额',
          value: 0
        },
        originAmount: {
          name: '实际预支',
          value: 0
        }
      } as any
    }
  },
  watch: {
    cardId: {
      handler(newval) {
        if (newval) {
          this.getData()
        }
      },
      immediate: true
    }
  },
  computed: {
    setDefault() {
      return (value: string) => {
        return value ?? '0'
      }
    }
  },
  methods: {
    getData() {
      queryUserEmployeePrepaidRecordSum({
        idCardNo: this.cardId
      }).then((res: any) => {
        this.detail = res
        for(const key in this.listData) {
          this.listData[key].value = res[key]
        }
      })
    }
  }
})
</script>

<style scoped lang="stylus">
// .body
//   background #F7FBFE
//   border-radius 6px
.w-200
  width 200px
.w-300
  flex: 1
  max-idth 300px
.fc-lightgray
  color #5E617D
.icon-gender
  width 16px
  height 16px
  margin-left 4px
.value
  font-style italic
.bg-blue
  background #F7FBFE
  border-radius 6px
  padding 18px 36px

</style>
